<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ksplayer demo</title>
    <meta content="直播SDK，点播SDK，金山云，视频云，视频播放，KLS，KVS，Kingsoft，KingCloud, Playback, KSPlayer, ksplayer"
          name="keywords">
    <meta content="KSPlayer是金山云的Web端视频播放器，该播放器Web SDK让您可以在主流的桌面和移动端浏览器上播放rtmp、hls、http-flv协议的直播视频以及mp4、m3u8格式的点播视频。KSPlayer基于video.js框架开发，提供稳定和易于使用的API。本SDK隶属于金山云视频云解决方案"
          name="description">
    <link rel="shortcut icon" href="https://www.ksyun.com/assets/img/static/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/ksplayer.min.css">

    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #f0f0f0;
        }

        h1 {
            margin: 20px 0 10px;
            font-weight: 500;
            line-height: 1.1;
        }

        .video-container {
            position: relative;
            width: 90vw; /* 使用相对宽度以适应各种设备 */
            max-width: 360px; /* 最大宽度，防止过大 */
            height: 60vh; /* 高度相对视口的高度 */
            max-height: 640px; /* 最大高度，防止过大 */
            background: transparent; /* 保持透明背景 */
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        .video-js {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent; /* 保持视频背景透明 */
        }

        .control-bar {
            margin-top: 20px;
        }

        .control-bar input {
            border: 1px solid #ccc;
        }

        .control-bar button {
            padding: 8px 30px;
            background-color: cornflowerblue;
            outline: none;
            border: none;
            color: #ffffff;
            font-weight: 500;
        }

        .control-bar button:hover {
            cursor: pointer;
        }

        .control-bar input {
            width: 75%;
            line-height: 2.5;
            height: 34px;
            padding: 0 10px;
            margin-bottom: 10px;
        }

        .video-js .wider-style {
            width: 150px;
        }

        .mute-button {
            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-image: url('https://sjzz.ilhjy.cn/uimg/202405/14/1715651036930_3480.png');
            background-size: cover;
            background-position: center;
            cursor: pointer;
            animation: pulse 2s infinite; /* 添加脉冲动画 */
        }

        /* 添加引导动画 */
        @keyframes pulse {
            0% {
                transform: translate(-50%, -50%) scale(1); /* 初始大小 */
            }
            50% {
                transform: translate(-50%, -50%) scale(1.2); /* 放大 */
            }
            100% {
                transform: translate(-50%, -50%) scale(1); /* 还原 */
            }
        }
    </style>

</head>
<body>
<div class="video-container">
    <!--two choices for css:  vjs-default-skin or vjs-sublime-skin-->
    <video id=example-video class="video-js mobile-first-skin" x5-video-player-type="h5" controls muted preload="auto"
           width="360" height="640"
           crossorigin="anonymous">
        <source src="assets/video/1717658488515_3480.webm"
                type="video/webm">
    </video>
    <!-- 声音开关按钮 -->
    <div id="mute-btn" class="mute-button"></div>
</div>
<!--<div class="control-bar">-->
<!--    <input id="video-url" placeholder="输入视频URL"> <button id="change-video">加载</button>-->
<!--</div>-->
<!--<div><img id="snapshot" src=""/></div>-->

<script src="js/ksplayer.min.js"></script>

<script>

    var $ = document.querySelectorAll.bind(document);

    var player = ksplayer('example-video', {
        controls: false, // 隐藏控制栏
        language: 'zh-CN',
//        autoHeight: true,
//        autoWidth: true,
        loop: true,
        fluid: false,  //响应式
        bigPlayButton: true,
        autoplay: true,
        controlBar: {
            volumeMenuButton: {
                inline: false,
                vertical: true
            }
        }
//        "playbackRates": [1, 1.5, 2]
    });

    const muteBtn = document.getElementById('mute-btn');

    // 切换静音和播放声音
    muteBtn.addEventListener('click', () => {
        if (player.muted()) {
            player.muted(false); // 取消静音
            muteBtn.style.display = 'none'; // 点击后隐藏div
        } else {
            player.muted(true); // 静音
        }
    });


    //视频截图插件初始化(设置img标签DOM节点的Id)，只对H5播放有效
    player.Snapshot({imgDOMId: 'snapshot'});

    //var player2 = ksplayer('example-video');
    //console.log(player == player2);

    player.on("ready", function (event) {
        console.log(event);
    });
    player.on("ended", function (event, data) {
        console.log(event);
    });

    player.on("pause", function (event, data) {
        console.log(event);
    });

    player.on("play", function (event, data) {
        console.log(event);
    });

    player.on("playing", function (event, data) {
        console.log(event);

        //截图
        /* setTimeout(function() {
             player.snapshot();
         },2000);*/
    });

    player.on("seeked", function (event, data) {
        console.log(event);
    });

    player.on("seeking", function (event, data) {
        console.log(event);
    });

    player.on("loadstart", function (event, data) {
        console.log(event);
    });


    player.on("loadeddata", function (event) {
        console.log(event);
    });

    player.on("loadedmetadata", function (event) {
        console.log(event);
        console.log("duration:" + player.duration());
    });


    player.on("useractive", function (event) {
        //console.log( event );
    });

    player.on("userinactive", function (event) {
        //console.log( event );
    });

    player.on("volumechange", function (event) {
        console.log(event);
    });

    player.on("durationchange", function (event) {
        console.log(event);
    });

    player.on("error", function (event) {
        console.log(event);
    });
</script>
</body>
</html>